<script setup lang="ts">
import { computed, ref } from 'vue';

import { processHtmlContent } from '@vben/utils';

import { useQuery } from '@tanstack/vue-query';
import { Button, Modal, Spin } from 'ant-design-vue';

import { BriefDetail } from '#/api';

const rowId = ref<number | undefined>(undefined);
const visible = ref<boolean>(false);

const { data: detail } = useQuery({
  enabled: computed(() => Boolean(rowId.value) && visible.value),
  queryKey: ['brief/detail', computed(() => rowId.value)],
  queryFn: () => BriefDetail({ id: rowId.value! }),
});

const result = computed(() => {
  const content = detail.value?.result;
  return content ? processHtmlContent(content) : '';
});

function handleClose() {
  visible.value = false;
}

defineExpose({
  open(params: { id: number }) {
    if (!params?.id) return;
    rowId.value = params.id;

    visible.value = true;
  },
});
</script>

<template>
  <Modal
    v-model:open="visible"
    :after-close="handleClose"
    :mask-closable="false"
    :title="detail?.name"
    :width="800"
  >
    <div v-if="result" class="h-[600px] overflow-auto" v-html="result"></div>
    <div v-else class="flex flex-col items-center justify-center pt-12">
      <Spin size="large" />
      <p class="mt-4 text-base">内容正在生成中， 请稍后再查看</p>
    </div>

    <template #footer>
      <Button type="primary" @click="handleClose">好的</Button>
    </template>
  </Modal>
</template>
